<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-if="props.addVisible" v-model="props.addVisible" :title="props.operateType == 'Add' ? '新建模型对比' : '模型对比详情'" width="1400px" append-to-body :before-close="closeDialog">
    <div v-loading="loading">
      <h3 class="compare-title"><span class="title">对比对象</span></h3>
      <div class="compare-card">
        <el-row :gutter="6">
          <el-col :span="11" class="custom-margin"> 
            <el-card>
              <template #header>
                <div class="card-header">
                  <span class="title">需要对比的模型文件</span>
                </div>
              </template>
              <el-form ref="referencedObjectRef" :model="referencedObject" size="small" label-width="120">
                <el-form-item label="机型：" prop="modelNumber">
                  <span>{{ referencedObject.modelNumber }}</span>
                </el-form-item>
                <el-form-item label="批次号：" prop="batchNumber">
                  <span>{{ referencedObject.batchNumber }}</span>
                </el-form-item>
                <el-form-item v-if="compareType === 'section'" label="部件名称：" prop="sectionNumber">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.sectionNumber }}</span>
                </el-form-item>
                <el-form-item label="轮次：" prop="filePath">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.fileName }}</span>
                </el-form-item>
                <el-form-item label="备注：" prop="filePath">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.fileName }}</span>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <el-col :span="2">
            <div class="bold-text">
              <div class="vs">VS</div>
            </div>
          </el-col>
          <el-col :span="11">
            <el-card>
              <template #header>
                <div class="card-header">
                  <span class="title">对比对象（参照物）</span>
                </div>
              </template>
              <el-form ref="comparedObjectRef" :model="comparedObject" size="small" label-width="120">
                <el-form-item label="机型：" prop="modelNumber">
                  <span>{{ referencedObject.modelNumber }}</span>
                </el-form-item>
                <el-form-item label="批次号：" prop="batchNumber">
                  <span>{{ referencedObject.batchNumber }}</span>
                </el-form-item>
                <el-form-item v-if="compareType === 'section'" label="部件名称：" prop="sectionNumber">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.sectionNumber }}</span>
                </el-form-item>
                <el-form-item label="轮次：" prop="filePath">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.fileName }}</span>
                </el-form-item>
                <el-form-item label="备注：" prop="filePath">
                  <span v-if="props.operateType === 'View'">{{ referencedObject.fileName }}</span>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <h3><span class="title">对比报告</span></h3>
      <el-tabs v-if="compareRes && props.compareStatus == 'completed' && hasCompareRes" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <div class="dialog-footer" style="text-align: center;">
        <el-button size="small" @click="closeDialog">返回</el-button>
        <el-button v-if="props.operateType !== 'View'" size="small" type="primary" @click="startCompare">开始对比</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="AnalysisReport">
import * as XLSX from 'xlsx';
import { downloadFile } from '@/utils/index';
import { 
  getAllFileList, 
  getModelFilesByCategory, 
  getMeshModelStructureList, 
  getBatchNo, 
  addCompareTask, 
  getCompareDetail, 
  downloadBdfCompareResult,
  getBdfCompareBase64Result
} from '@/api/dataAcquisition';
const emit = defineEmits(['handleEvent']);
const loading = ref(false);
const props = defineProps(['addVisible', 'compareRecordId', 'operateType', 'compareStatus']);
const compareType = ref('model');
const modelList = ref([]);
const compareResult = ref({});
const referencedObjectRef = ref(null);
const comparedObjectRef = ref(null);
const activeName = ref('first');
const compareRes = ref(null);
const hasCompareRes = ref(false); // 判断是否存在对比结果
const comparedObject = ref({
  modelNumber: '',
  batchNumber: '',
  sectionNumber: '',
  filePath: ''
})
const referencedObject = ref({                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
  modelNumber: '',
  batchNumber: '',
  sectionNumber: '',
  filePath: ''
})
const handleClick = () => {}      
const closeDialog = () => {
  emit('handleEvent', {type: 'cancel'});
};
const getAllModel = () => {
  getMeshModelStructureList({parentId: 0, pageSize: 999}).then(res => {
    if (res) {
      modelList.value = res.rows;
    }
  })
}
const startCompare = async () => {
  let flag1 = await referencedObjectRef.value.validate();
  let flag2 = await comparedObjectRef.value.validate();
  if (!flag1 || !flag2) {
    return;
  }
  loading.value = true;
  let params = {
    id: props.compareRecordId,
    type: compareType.value,
    comparedObject: comparedObject.value,
    referencedObject: referencedObject.value,
  }
  addCompareTask(params).then(res => {
    loading.value = false;
    if (res) {
      ElMessage({ showClose: true, message: '模型对比任务创建成功', type: 'success' });
      emit('handleEvent', {type: 'refresh'});
    } 
  }).catch(e => {
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  });
}
// 获取对比详情
const getModelCompareDetail = () => {
  loading.value = true;
  getCompareDetail({_id: props.compareRecordId}).then(res => {
    if (res) {
      loading.value = false;
      console.log('res', res)
      loading.value = false;
      referencedObject.value = res.data.referencedObject;
      comparedObject.value = res.data.comparedObject;
      compareType.value = res.data.type;
      compareResult.value = res.data.compareResult;
    }
  }).catch(e => {
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  });
}
const loadCompareResultExcel = () => {  
  loading.value = true;
  
}

onMounted(() => {
  getAllModel();
  // downCompareResultExcel();
  props?.compareRecordId && getModelCompareDetail();
  props?.compareRecordId && props.compareStatus == 'completed' && loadCompareResultExcel();
});
</script>

<style lang="scss" scoped>


.compare-card {
  .color-mark {
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    .color-mark__item {
      padding: 5px 10px;
      font-size: 14px;
      &.modified {
        background: #E6A23C;
        // color: #fff;
      }
      &.added {
        background: rgba(255,0,0,0.3);;
        // color: #fff;
      }
      &.removed {
        background: rgba(194, 128, 255, 1);
        // color: #fff;
      }
    }
  }
  .title {
    font-weight: 600;
    font-size: 16px;
  }
  .bold-text {
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    align-items: center;
    .vs {
      height: 80px;
      width: 80px;
      line-height: 80px;
      text-align: center;
      font-weight: bold;
      font-size: 40px;
      color: #ffffff;
      background: #409EFF;
      border-radius: 10px;
      text-shadow: 2px 2px 4px #000000;
    }
  }
}
.compare-title {
  .title {
    font-size: 18px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    &::before {
      content: "";
      display: inline-block;
      width: 5px;
      height: 16px;
      margin-right: 5px;
      background-color: #409EFF;
      vertical-align: middle;
      margin-top: -3px;
    }
  }
}
.compare-result {
  ul,li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .modified {
    background: #E6A23C;
    color: #fff;
  }
  .added {
    background: rgba(255,0,0,0.3);
  }
  .removed {
    background: rgba(194, 128, 255, 1);
  }
}
.compare-table__header {
  display: flex;
  align-items: center;
  // border-left: 1px solid #ebeef5;
  // border-bottom: 1px solid #ebeef5;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  .th {
    // flex: 1;
    text-align: center;
    padding: 5px 10px;
    border-right: 1px solid #ebeef5;
    border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    background: #f8f8f9;
    color: #515a6e;
  }
  
}
.single {
  .th, .td {
    &:nth-child(1) {
      width: 700px;
      border-left: 1px solid #ebeef5;
    }
    &:nth-child(2) {
      width: 500px;
    }
    &:nth-child(3) {
      width: 120px;
    }
  }
}
.total {
  .th, .td {
    &:nth-child(1) {
      width: 400px;
      border-left: 1px solid #ebeef5;
    }
    &:nth-child(2) {
      width: 170px;
    }
    &:nth-child(3) {
      width: 90px;
    }
    &:nth-child(4) {
      width: 400px;
    }
    &:nth-child(5) {
      width: 170px;
    }
    &:nth-child(6) {
      width: 90px;
    }
  }                                                                                                                     
  
}
.compare-table__content {
  display: flex;
  // align-items: center;
  // border-top: 1px solid #ebeef5;
  // border-bottom: 1px solid #ebeef5;
  font-weight: 400;
  font-size: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  // white-space: pre-line;
  .td {
    // flex: 1;
    text-align: left;
    padding: 5px 10px;
    border-right: 1px solid #ebeef5;
    height: 50px;
    border-bottom: 1px solid #ebeef5;
    white-space: pre-wrap;
  }
}
.custom-tabs-label {
  display: flex;
  align-items: center;
  i {
    margin-right: 3px;
  }
}
</style>
